<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>首页</title>

    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>
    <link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css"/>

    <link href="basic/css/demo.css" rel="stylesheet" type="text/css"/>

    <link href="css/hmstyle.css" rel="stylesheet" type="text/css"/>
    <script src="AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
    <script src="basic/js/axios.min.js"></script>
    <script src="basic/js/vue.js"></script>
</head>

<body>
<div class="hmtop" id="indexTop">
    <!--顶部导航条 -->
    <div class="am-container header">
        <ul class="message-l">
            <div class="topMessage">
                <div class="menu-hd">
							<span v-if="username != null">
								{{username}}&nbsp;&nbsp;
								<a href="/" @click="logout" target="_top">退出</a>
							</span>
                    <span v-else>
							<a href="login.html" target="_top" class="h">亲，请登录</a>&nbsp;&nbsp;
							<a href="register.html" target="_top">免费注册</a>
							</span>
                </div>
            </div>
        </ul>
        <ul class="message-r">
            <div class="topMessage home">
                <div class="menu-hd"><a href="/" target="_top" class="h">商城首页</a></div>
            </div>
            <div class="topMessage my-shangcheng">
                <div class="menu-hd MyShangcheng"><a href="person/information.html" target="_top"><i
                        class="am-icon-user am-icon-fw"></i>个人中心</a></div>
            </div>
            <div class="topMessage mini-cart">
                <div class="menu-hd"><a id="mc-menu-hd" href="#" target="_top"><i
                        class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                              class="h">0</strong></a>
                </div>
            </div>
            <div class="topMessage favorite">
                <div class="menu-hd"><a href="#" target="_top"><i class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a>
                </div>
        </ul>
    </div>

    <!--悬浮搜索框-->

    <div class="nav white">
        <div class="logo"><img src="images/logo.png"/></div>
        <div class="logoBig">
            <li><img src="images/logobig.png"/></li>
        </div>

        <div class="search-bar pr">
            <a name="index_none_header_sysc" href="#"></a>
            <form style="border: 2px solid black">
                <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off"
                       style="padding-left: 10px;font-size: 1.3em">
                <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit"
                       style="background-color: black">
            </form>
        </div>
    </div>

    <div class="clear"></div>
</div>

<script>
    Vue.createApp({
        setup() {
            const username = Vue.ref()
            Vue.onMounted(() => {
                if (localStorage.getItem("token") !== null) {
                    username.value = localStorage.getItem("username")
                }
            })
            const logout = () => {
                localStorage.clear()
            }
            return {
                username,
                logout,
            }
        }
    }).mount("#indexTop")
</script>
